/*
 * Copyright © 2017-2018 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
*/

@import '~styles/variables.scss';

$icon_color: #cccccc;

.rules-engine-service-control {
  display: flex;
  height: calc(100vh - (#{$height-of-footer} + #{$height-of-header}));
  font-size: 15px;
  overflow: auto;

  .text-container,
  .image-containers {
    width: 50%;
    height: 100%;
  }

  .image-containers {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
    padding-left: 25px;
    img {
      height: auto;
      margin: 20px;
      width: 75%;
      &:first-child {
        margin-top: 0;
      }
    }
  }
  .text-container {
    padding-top: 50px;
    padding-left: 30px;
    padding-right: 30px;

    p {
      line-height: 2;
      padding-right: 20px;
    }
    .rules-engine-benefit {
      ul {
        padding-left: 0;
        list-style: none;
        li {
          display: flex;
          padding: 10px 0;
          svg,
          span.fa {
            font-size: 2rem;
            fill: $icon_color;
            color: $icon_color;
            margin-right: 10px;
            &.icon-edit,
            &.icon-cogs,
            &.fa-university,
            &.icon-arrows-alt {
              font-size: 1.7rem;
            }
          }
        }
      }
    }
    .action-container {
      padding-top: 25px;
      padding-bottom: 25px;

      .loading-bar {
        height: 16px;
        rect {
          fill: $blue-06;
        }
      }
    }
    .mail-to-link {
      color: var(--brand-primary-color);
    }
    .btn {
      .btn-label {
        vertical-align: top;
      }
    }
  }
  .rules-engine-service-control-error {
    .icon-svg {
      margin-right: 5px;
    }
  }
}
